
function template(state, props) {
  const inst = ui_list({
    data: timelineAdapter({data: state.dt1, idx: 1, type: 'dot'}),
    listClass: 'ss-steps',
  })
  const inst2 = ui_list({
    data: timelineAdapter({data: state.dt1, idx: 1, type: 'num'}),
    listClass: 'ss-steps-num',
  })
  const inst3 = ui_list({
    data: timelineAdapter({data: state.dt1, idx: 0, type: 'icon'}),
    listClass: 'ss-steps-icon',
  })
  const inst4 = ui_list({
    data: timelineAdapter({data: state.dt1, idx: 0, type: 'dot', dist: 'lr'}),
    listClass: 'ss-steps',
    itemClass: 'lr'
  })
  const inst5 = ui_list({
    data: timelineAdapter({data: state.dt1, idx: 0, type: 'num'}),
    listClass: 'ss-steps-num column',
    listStyle: {height: '250px'}
  })
  console.log(<inst.UI />)
  return (
    <>
      <View className="pages-title-lg">步骤条</View>
      <View style={{height: '80vh'}} className='flex-column justify-between'>
        
        {<inst.UI />}
        {<inst4.UI />}
        {<inst2.UI />}
        {<inst3.UI />}
        {<inst5.UI />}
      </View>
    </>
  )
}

export default function(Pager) {
  return Pager({
    template,
    data: {
      dt1: [
        { title: '活动按期开始', desc: '描述活动按期开始', timestamp: '2018-04-15' },
        { title: '通过审核', desc: '描述通过审核', timestamp: '2018-04-13' },
        { title: '创建成功', desc: '描述创建成功', timestamp: '2018-04-11' }
      ]
    },
    __ready() {
    }
  })
}

function timelineAdapter(params) {
  const {data, idx, type, dist} = params
  //type: dot num icon
  //dist  center left lr
  return data.map((item, ii) => {
    return {
      title: [
        { title: '', itemClass: type === 'icon' ? 'item-'+type +' icon-saui' : 'item-'+type },
        dist!== 'lr' ? { title: '', itemClass: 'item-line' }: '',
      ],
      body: [
        {title: item.title, itemClass: dist === 'lr' ? 'item-title item-line' : 'item-title'},
        {title: item.desc, itemClass: 'item-desc'}
      ],
      titleClass: 'item-head',
      bodyClass: 'item-content',
      itemClass: ii < idx ? 'finish' : ii === idx ? 'active'  : ''
    }
  })
}